<template>
  <div class="kd_username_add">
    <div class="kd_username_add_left">
      <el-icon><Tickets /></el-icon>
      <span>数据列表</span>
    </div>
    <div class="kd_username_add_right">
      <el-button @click="addFlashShow=true">添加</el-button>
    </div>
  </div>
  <el-table
    ref="multipleTableRef"
    :data="SessionList"
    style="min-width: 750px"
    cell-class-name="align-c"
    border
  >
    <el-table-column property="id" label="编号" width="60" />
    <el-table-column property="name" label="秒杀时间段名称" />
    <el-table-column property="createTime" label="每日开始时间">
      <template #default="{ row }">
        {{ formateDate(row.createTime) }}
      </template>
    </el-table-column>
    <el-table-column property="endTime" label="每日结束时间">
      <template #default="{ row }">
        {{ formateDate(row.endTime) }}
      </template>
    </el-table-column>
    <el-table-column property="" label="启用">
      <template #default="{ row }">
        <el-switch v-model="row.status" :active-value="1" :inactive-value="0" />
      </template>
    </el-table-column>
    <el-table-column property="" label="操作" width="120">
      <template #default>
        <el-button text type="primary" style="margin: 0">编辑</el-button>
        <el-button text type="primary" style="margin: 0">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <addflashtimeVue :show="addFlashShow" @HiddenFn="flashHiddenFn" />
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { getFlashSessionApi } from "./api";
import { formateDate } from "@/utils";
import addflashtimeVue from "./addflashtime.vue";
const SessionList = ref<IFlashSession[]>([]);
const addFlashShow = ref(false);
const flashHiddenFn = (value: boolean) => {
  addFlashShow.value = false;
  if (value) getFlashSessionApi();
};
getFlashSessionApi().then((res) => {
  if (res.code === 200) {
    SessionList.value = res.data;
  }
});
</script>

<style lang="scss" scoped>
:deep(.align-c),
:deep(.el-table__header) {
  .cell {
    text-align: center !important;
  }
}
.kd_username_add {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  box-shadow: 0 0 5px 5px #eee;
  margin: 20px 0;
  .kd_username_add_left {
    display: flex;
    align-items: center;
    span {
      padding-left: 10px;
    }
  }
  .kd_username_add_right {
  }
}
</style>
